<template>
  <div class="my">
    <div class="bg">
      <van-icon name="setting" />
      <h6 v-cloak>{{ userInfo.name }}</h6>
    </div>
    <div class="content">
      <div class="user">
        <img :src="userInfo.photo" alt="" />
      </div>
      <van-grid>
        <van-grid-item icon="column" text="我的作品" />
        <van-grid-item icon="star" text="我的收藏" />
        <van-grid-item icon="todo-list" text="阅读历史" />
      </van-grid>
    </div>
    <van-cell-group class="list">
      <van-cell title="编辑资料" is-link to="/my/editData" icon="edit" />
      <van-cell title="小智同学" is-link icon="chat-o" />
      <van-cell title="系统设置" is-link icon="setting-o" />
      <van-cell title="退出登录" is-link icon="warning-o" @click="close" />
    </van-cell-group>
  </div>
</template>

<script>
import { deleteToken } from '../../utils/token'
import { mapState } from 'vuex'
export default {
  name: 'my',
  data () {
    return {}
  },
  methods: {
    // 退出登录
    close () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确认要退出当前登录吗？'
        })
        .then(() => {
          this.$toast.success('退出成功')
          deleteToken()
          this.$store.commit('setUserInfo', {})
          this.$router.push({ path: '/login' })
        })
        .catch(() => {})
    }
  },
  computed: mapState(['userInfo'])
  // computed: {
  //   userInfo () {
  //     // 获取仓库的用户信息
  //     return this.$store.state.userInfo
  //   }
  // }
}
</script>

<style lang="less" scope>
.my {
  [v-cloak] {
    display: none;
  }
  // 登录
  .content {
    position: relative;
    width: 88%;
    height: 120px;
    margin: 0 auto;
    padding: 0 10px;
    top: -60px;
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 2px 2px 10px #74b2c7;
    .user {
      position: relative;
      top: -40%;
      width: 80px;
      height: 80px;
      margin: 0 auto;
      background-color: #edf3f9;
      border: 1px solid #b7d6e3;
      border-radius: 50%;
    }
    .user img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    [class*='van-hairline']::after {
      border: none;
    }
    .van-grid div {
      position: relative;
      top: -30px;
      flex-basis: 33% !important;
      .van-grid-item__content {
        background-color: transparent;
      }
      .van-icon-column {
        color: #9aa3fb;
      }
      .van-icon-star {
        color: #e54944;
      }
      .van-icon-todo-list {
        color: #8bcd9d;
      }
    }
  }

  // 背景图
  .bg {
    position: relative;
    height: 220px;
    background: url('../../assets/userBg.jpg') no-repeat;
    background-position-x: -200px;
    opacity: 0.8;
    h6 {
      padding-top: 70px;
      color: #fff;
      text-align: center;
    }
    .van-icon-setting {
      position: absolute;
      color: #fff;
      right: 18px;
      top: 25px;
    }
  }
  .list {
    margin-top: -40px;
    .van-cell__title {
      line-height: 30px;
      color: #646566;
      font-size: 17px;
    }
    .van-cell__left-icon {
      top: 1px;
      margin-right: 4px;
      color: #4b6cae;
    }
    .van-cell::after {
      border-bottom: none !important;
    }
  }
}
</style>
